<script setup lang="ts">
import { reactive, ref } from 'vue'
import { uploadPictureByBatchUsingPost } from '@/servers/api/pictureController.ts'
import { message } from 'ant-design-vue'
import { useRouter } from 'vue-router'

const router = useRouter()
// 控制加载动画
const loading = ref(false)
// 表单数据
const formData = reactive<API.PictureUploadByBatchRequest>({
  searchText: '',
  count: 10,
  namePrefix: ''
})

//  表单提交
const onFinish = async (values: any) => {
  try {
    loading.value = true
    const res = await uploadPictureByBatchUsingPost(values)
    if (res.code == 200) {
      const count = res.data
      message.success(`上传成功${count}张图片，准备跳转首页`)
      setTimeout(() => {
        router.push({
          path: '/picture/list'
        })
      }, 2000)
    } else {
      message.error(res.message)
    }
  } catch (error) {
    console.log(error)
    message.error('上传失败')
  } finally {
    loading.value = false
  }
}

const onFinishFailed = (errorInfo: any) => {
  console.log('Failed:', errorInfo)
}
</script>

<template>
  <div class="container">
    <a-spin tip="抓取中..." :spinning="loading">
      <a-form
        :model="formData"
        name="basic"
        :label-col="{ span: 8 }"
        :wrapper-col="{ span: 16 }"
        autocomplete="off"
        @finish="onFinish"
        @finishFailed="onFinishFailed"
      >
        <a-form-item
          label="关键词"
          name="searchText"
          :rules="[{ required: true, message: '请输入搜索关键词' }]"
        >
          <a-input v-model:value="formData.searchText" />
        </a-form-item>

        <a-form-item
          label="抓取数量"
          name="count"
          :rules="[{ required: true, message: '请输入抓取数量' }]"
        >
          <a-input-number v-model:value="formData.count" :min="1" :max="30" style="width: 100%;" />
        </a-form-item>

        <a-form-item
          label="图片前缀"
          name="namePrefix"
        >
          <a-input v-model:value="formData.namePrefix" />
        </a-form-item>

        <a-form-item :wrapper-col="{ offset: 8, span: 16 }">
          <a-button type="primary" html-type="submit">确认</a-button>
        </a-form-item>
      </a-form>
    </a-spin>
  </div>
</template>

<style scoped lang="scss">
.container {
  height: 100%;
  max-width: 600px;
  margin: 0 auto;
}
</style>
